{% load i18n %}
<form class="form-horizontal" role="form" method="post" action="{{request.prefix}}/execute/launch/createbuckets/">{% csrf_token %}
<input type="hidden" name="weekstart" id="weekstart" value="1">
<table>
  <tr>
    <td style="vertical-align:top; padding: 15px">
      <button class="btn btn-primary" type="submit" value="{% trans "launch"|capfirst %}">{% trans "launch"|capfirst %}</button>
    </td>
    <td style="padding: 15px; width:99%">
         <p>Create time buckets for reporting.</p>
         <div class="form-group">
         <label class="col-sm-3 control-label">Start date</label>
         <div class="col-sm-9">
         <input class="vDateField form-control" id="start" name="start" type="text" size="12" value="2014-01-01"/>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label">End date</label>
         <div class="col-sm-9">
         <input class="vDateField form-control" id="end" name="end" type="text" size="12" value="2022-01-01"/>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label" for="weekstart1">Week starts on</label>
         <div class="col-sm-9">
         <div class="dropdown dropdown-submit-input">
           <button class="btn btn-default dropdown-toggle form-control"  id="weekstart1" value="1" type="button" data-toggle="dropdown">Monday&nbsp;&nbsp;<span class="caret"></span></button>
           <ul class="dropdown-menu col-xs-12" aria-labelledby="weekstart1" id="weekstartul">
             <li><a>Sunday</a></li>
             <li><a>Monday</a></li>
             <li><a>Tuesday</a></li>
             <li><a>Wednesday</a></li>
             <li><a>Thursday</a></li>
             <li><a>Friday</a></li>
             <li><a>Saturday</a></li>
           </ul>
         </div>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label">Day name</label>
         <div class="col-sm-9">
         <input class="form-control" name="format-day" type="text" size="12" value="%Y-%m-%d"/>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label">Week name</label>
         <div class="col-sm-9">
         <input class="form-control" name="format-week" type="text" size="12" value="%y W%W"/>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label">Month name</label>
         <div class="col-sm-9">
         <input class="form-control" name="format-month" type="text" size="12" value="%b %y"/>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label">Quarter name</label>
         <div class="col-sm-9">
         <input class="form-control" name="format-quarter" type="text" size="12" value="%y Q%q"/>
         </div>
         </div>
         <div class="form-group">
         <label class="col-sm-3 control-label">Year name</label>
         <div class="col-sm-9">
         <input class="form-control" name="format-year" type="text" size="12" value="%Y"/>
         </div>
         </div>
     </td>
   </tr>
</table>
</form>
<script>
  iconslist = {
    time: 'fa fa-clock-o',
    date: 'fa fa-calendar',
    up: 'fa fa-chevron-up',
    down: 'fa fa-chevron-down',
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-bullseye',
    clear: 'fa fa-trash',
    close: 'fa fa-close'
  };
  
$(function() {
  // Date picker
  $(".vDateField").on('focusin', function() {
    $(this).parent().css('position', 'relative');
    $(this).datetimepicker({format: 'YYYY-MM-DD', calendarWeeks: true, icons: iconslist, locale: document.documentElement.lang});
  });

  $("#weekstartul li a").click(function(){
    $("#weekstart1").html($(this).text() + ' <span class="caret"></span>');
    $("#weekstart").val($(this).parent().index());
  });
});
</script>